<template>
  <div id="info-card">
    <div>
      <el-avatar class="w-100 h-100" :src="websiteInfo.iconUrl"></el-avatar>
    </div>
    <el-row class="fz-20">
      <el-col :span="12" class="text-align-right">网站中文名:</el-col>
      <el-col :span="12" class="text-align-left p-l-20">{{websiteInfo.zhName}}</el-col>
    </el-row>
    <el-row class="fz-20">
      <el-col :span="12" class="text-align-right">网站英文名:</el-col>
      <el-col :span="12" class="text-align-left p-l-20">{{websiteInfo.engName}}</el-col>
    </el-row>
    <el-row class="fz-20">
      <el-col :span="12" class="text-align-right">网站站长:</el-col>
      <el-col :span="12" class="text-align-left p-l-20">{{websiteInfo.master}}</el-col>
    </el-row>
    <div class="num">
      <el-row>
        <el-col :span="8">
          <div class="flex flex-column">
            <div>文章总数</div>
            <div class="fz-30">{{infoNum.articlesNum}}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="flex flex-column">
            <div>留言总数</div>
            <div class="fz-30">{{infoNum.GuestNum}}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="flex flex-column">
            <div>文章类型总数</div>
            <div class="fz-30">{{infoNum.ArticleTypesNum}}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      websiteInfo: {},
      infoNum: {}
    }
  },
  created() {
    this.getWebsiteInfo()
    this.getInfoNum()
  },
  methods: {
    async getWebsiteInfo() {
      let res = await this.api.get('/getWebsiteInfo')
      if (res.code == 0) this.websiteInfo = res.data
      else this.$message({message: res.message, type: 'warning', showClose: true,})
    },
    async getInfoNum() {
      let res = await this.api.get('/getInfoNum')
      if (res.code == 0) this.infoNum = res.data
      else this.$message({message: res.message, type: 'warning', showClose: true,})
    },
  }
}
</script>

<style lang="scss">
  #info-card {
    color: #606266;
    text-align: center;
    // background: rgba(247, 247, 247, 0.726);
    height: 300px;
    margin-bottom: 20px;
    border: 1px solid rgb(236, 236, 236);
    border-radius: 5px;
    transition: all .5s;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    &:hover {
      box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.2);
    }
  }
</style>